import { languageMap } from '@/locales/lang-lists';
import { useGlobalStore } from '@/store';
import { CaretDownOutlined } from '@ant-design/icons';
import { Button, Dropdown, Space } from 'antd';
import { useCallback } from 'react';
import { useShallow } from 'zustand/shallow';
import { languageItems, userMenuItems } from './constants';
import Avatar from '@/assets/imgs/avatar.png';

export const HeaderActions: React.FC = () => {
	const { language, setLanguage } = useGlobalStore(
		useShallow(state => ({
			language: state.language,
			setLanguage: state.setLanguage
		}))
	);

	/**
	 * @description 下拉菜单点击事件
	 * @param {string} key 菜单key
	 */
	const dropDownClick = useCallback(({ key }: { key: string }) => {
		console.log(key);
	}, []);

	// 语言切换
	const changeLang = useCallback(
		({ key }: { key: string }) => {
			setLanguage(key);
		},
		[setLanguage]
	);

	return (
		<div className="wh-full flex items-center justify-end">
			{/* 语言切换 */}
			<Dropdown
				menu={{
					items: languageItems,
					onClick: changeLang
				}}
				placement="bottomRight"
				arrow>
				<Button size="small" className="m-r-15 text-12">
					{languageMap.get(language || 'zh-CN')?.label}
					<CaretDownOutlined />
				</Button>
			</Dropdown>
			{/* 用户菜单 */}
			<Dropdown
				menu={{ items: userMenuItems, onClick: dropDownClick }}
				placement="bottomRight"
				arrow>
				<Space>
					<img className="w-30 h-30" src={Avatar} alt="" />
					<span className="text-[rgba(255,255,255,.8)]">沉下心</span>
					<CaretDownOutlined className="text-#999" />
				</Space>
			</Dropdown>
		</div>
	);
};